"use client";
import { Button, Progress, Select, Modal, Form, Input, Drawer } from "antd";
import React, { useState, useEffect } from "react";
import type { FormProps } from "antd";
import { useRouter } from "next/navigation";
import dayjs from "dayjs";
import {
  DollarOutlined,
  UserAddOutlined,
  BulbOutlined,
  FileTextOutlined,
  AuditOutlined,
  HighlightOutlined,
  FileProtectOutlined,
  FileDoneOutlined,
  FileSyncOutlined,
  AccountBookOutlined,
  PlusOutlined,
  RightOutlined,
} from "@ant-design/icons";
import * as echarts from "echarts";
export default function Lsy() {
  useEffect(() => {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };

    option && myChart.setOption(option);
  }, []);
  useEffect(() => {
    var chartDom = document.getElementById("main2");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          areaStyle: {},
        },
      ],
    };

    option && myChart.setOption(option);
  }, []);
  useEffect(() => {
    var chartDom = document.getElementById("main3");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
        },
      ],
    };

    option && myChart.setOption(option);
  }, []);
  const router = useRouter();
  const [position, setPosition] = useState<"start" | "end">("end");
  //下拉的值
  let [value, setvalue] = useState(1);
  //下拉对应的数据
  //左下div
  let arr1 = [
    { id: 1, tid: 1, label: "新增用户1", num: 200 },
    { id: 2, tid: 1, label: "新增线索1", num: 200 },
    { id: 3, tid: 1, label: "新增商机1", num: 200 },
    { id: 4, tid: 1, label: "新增订单1", num: 200 },
    { id: 5, tid: 1, label: "新增联系人1", num: 200 },
    { id: 6, tid: 1, label: "新增任务1", num: 200 },
    { id: 7, tid: 1, label: "新增工单1", num: 200 },
    { id: 8, tid: 1, label: "新增回执单1", num: 200 },
    { id: 9, tid: 2, label: "新增用户2", num: 200 },
    { id: 10, tid: 2, label: "新增线索2", num: 200 },
    { id: 11, tid: 2, label: "新增商机2", num: 200 },
    { id: 12, tid: 2, label: "新增订单2", num: 200 },
    { id: 13, tid: 2, label: "新增联系人2", num: 200 },
    { id: 14, tid: 2, label: "新增任务2", num: 200 },
    { id: 15, tid: 2, label: "新增任务2", num: 200 },
    { id: 16, tid: 2, label: "新增回执单2", num: 200 },
  ];
  let [crr, setsrcc] = useState([]);
  useEffect(() => {
    let cc = arr1.filter((item) => item.tid == value);
    setsrcc(cc);
  }, [value]);
  //系统公告数据
  let [xt, setxt] = useState([
    {
      id: 1,
      con: "【内部分享】如何建立良好的客户关系",
      time: "2019-04-10 09:00",
    },
    {
      id: 2,
      con: "【内部分享】如何建立良好的客户关系",
      time: "2019-04-10 10:00",
    },
    {
      id: 3,
      con: "【内部分享】如何建立良好的客户关系",
      time: "2019-04-10 11:00",
    },
    {
      id: 4,
      con: "【内部分享】如何建立良好的客户关系",
      time: "2019-04-10 11:00",
    },
    {
      id: 5,
      con: "【内部分享】如何建立良好的客户关系",
      time: "2019-04-10 11:00",
    }
  ]);
  //弹框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //添加
  const onFinish: FormProps["onFinish"] = (values) => {
    console.log("Success:", values);
    let obj = {
      ...values,
      time: dayjs(new Date().getTime()).format("YY-MM-DD HH:mm:ss"),
    };
    xt.push(obj);
    setIsModalOpen(false);
  };
  const onFinishFailed: FormProps["onFinishFailed"] = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  //抽屉
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        background: "rgba(240, 242, 245)",
        overflow: "auto",
      }}
    >
      <div
        style={{
          width: "1380px",
          height: "160px",
          display: "flex",
          justifyContent: "space-around",
          overflow: "auto",
        }}
      >
        <div
          style={{
            width: "250px",
            height: "140px",
            background: "#fff",
            borderRadius: "15px",
            marginTop: "20px",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <p style={{ marginLeft: "26px" }}>月销售金额(元)</p>
          <p
            style={{ fontSize: "20px", fontWeight: "900", marginLeft: "26px" }}
          >
            120,000
          </p>
          <p style={{ marginLeft: "26px" }}>周同比  12％ 日环比  12％</p>
          <div
            id="main"
            style={{ width: "250px", height: "65px", marginLeft: "15px" }}
          ></div>
        </div>
        <div
          style={{
            width: "250px",
            height: "140px",
            background: "#fff",
            borderRadius: "15px",
            marginTop: "20px",
          }}
        >
          <p style={{ marginLeft: "26px" }}>月回款金额(元)</p>
          <p
            style={{ fontSize: "20px", fontWeight: "900", marginLeft: "26px" }}
          >
            100000
          </p>
          <div
            id="main2"
            style={{ width: "250px", height: "80px", marginLeft: "15px" }}
          ></div>
        </div>
        <div
          style={{
            width: "250px",
            height: "140px",
            background: "#fff",
            borderRadius: "15px",
            marginTop: "20px",
          }}
        >
          <p style={{ marginLeft: "26px" }}>本月成交订单</p>
          <p
            style={{ fontSize: "20px", fontWeight: "900", marginLeft: "26px" }}
          >
            1,000
          </p>
          <div
            id="main3"
            style={{ width: "250px", height: "80px", marginLeft: "15px" }}
          ></div>
        </div>
        <div
          style={{
            width: "250px",
            height: "140px",
            background: "#fff",
            borderRadius: "15px",
            marginTop: "20px",
            display: "flex",
          }}
        >
          <div style={{ width: "50%" }}>
            <p style={{ marginLeft: "26px" }}>本月成交订单</p>
            <p
              style={{
                fontSize: "20px",
                fontWeight: "900",
              }}
            >
              75%
            </p>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <Progress type="circle" percent={75} size="small" />
          </div>
        </div>
        <div
          style={{
            width: "250px",
            height: "140px",
            background: "#fff",
            borderRadius: "15px",
            marginTop: "20px",
          }}
        >
          <p style={{ marginLeft: "26px" }}>回款达成率</p>
          <p
            style={{ fontSize: "20px", fontWeight: "900", marginLeft: "26px" }}
          >
            80%
          </p>
          <Progress
            percent={80}
            style={{ width: "200px", marginLeft: "26px" }}
          />
        </div>
      </div>
      {/* 快捷新建 */}
      <div
        style={{
          width: "1380px",
          height: "210px",
          background: "rgba(255, 255, 255)",
          marginTop: "30px",
          marginLeft: "5px",
        }}
      >
        <div
          style={{
            marginTop: "30px",
            background: "rgba(249, 249, 249)",
            height: "70px",
          }}
        >
          <p style={{ position: "relative", bottom: "-22px", left: "25px" }}>
            快速新建
          </p>
        </div>
        <div
          style={{
            fontSize: "80px",
            display: "flex",
            justifyContent: "space-around",
          }}
        >
          <div
            onClick={() => {
              router.push("/[locale]/czy");
            }}
          >
            <UserAddOutlined />
          </div>
          <div
            onClick={() => {
              router.push("/[locale]/hbs");
            }}
          >
            <BulbOutlined />
          </div>
          <div
            onClick={() => {
              router.push("/[locale]/yzh");
            }}
          >
            <DollarOutlined />
          </div>
          <div
            onClick={() => {
              router.push("/[locale]/lxy");
            }}
          >
            <FileTextOutlined />
          </div>
          <AuditOutlined />
          <HighlightOutlined />
          <FileProtectOutlined />
          <FileDoneOutlined />
          <FileSyncOutlined />
          <AccountBookOutlined />
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
          }}
        >
          <p>新建客户</p>
          <p>新建商机</p>
          <p>新建订单</p>
          <p>新建财务</p>
          <p>新建联系人</p>
          <p>写新跟进</p>
          <p>新建任务</p>
          <p>新建工单</p>
          <p>新建回执单</p>
          <p>回款计划</p>
        </div>
      </div>
      {/* 数据简报 */}
      <div
        style={{
          display: "flex",
          marginLeft: "10px",
          marginTop: "40px",
          width: "1360px",
          height: "300px",
          background: "rgba(240, 242, 245)",
        }}
      >
        <div
          style={{
            width: "680px",
            height: "300px",
          }}
        >
          <div
            style={{
              width: "680px",
              height: "50px",
              lineHeight: "50px",
              background: "rgba(249, 249, 249)",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <p style={{ position: "relative", bottom: "-1px", left: "25px" }}>
              数据简报
            </p>

            <div style={{ margin: "2px" }}>
              <Select
                onChange={(e) => {
                  setvalue(e);
                  console.log(e, "/261行");
                }}
                style={{ width: "100px" }}
                options={[{ value: 2, label: "本周" }]}
                placeholder="公司简报"
              ></Select>
              <Select
                onChange={(e) => {
                  setvalue(e);
                  console.log(e, "/261行");
                }}
                style={{ width: "100px" }}
                options={[{ value: 2, label: "本周" }]}
                placeholder="本周"
              ></Select>
            </div>
          </div>
          <div>
            <div
              style={{
                height: "234px",
                display: "flex",
                justifyContent: "space-between",
                flexWrap: "wrap",
                background: "rgba(255, 255, 255)",
              }}
            >
              {crr.map((item) => {
                return (
                  <div
                    key={item.id}
                    style={{
                      width: "170px",
                      height: "117px",
                      display: "flex",
                      flexWrap: "wrap",
                      textAlign: "center",
                      alignItems: "item",
                    }}
                  >
                    <div style={{ width: "170px", height: "51px" }}>
                      <p>{item.label}</p>
                      <p
                        style={{
                          fontSize: "20px",
                          fontWeight: "700",
                        }}
                      >
                        {item.num}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        <div
          style={{
            width: "680px",
            height: "300px",
            overflow: "auto",
            background: "while",
          }}
        >
          <div
            style={{
              width: "670px",
              height: "50px",
              lineHeight: "50px",
              background: "rgba(249, 249, 249)",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <p style={{ position: "relative", bottom: "-1px", left: "25px" }}>
              系统公告
            </p>
            <div style={{ marginTop: "10px" }}>
              <Button icon={<PlusOutlined />} onClick={showModal}>
                发布公告
              </Button>
              <Button
                icon={<RightOutlined />}
                iconPosition={position}
                style={{ marginLeft: "10px" }}
                onClick={showDrawer}
              >
                查看更多
              </Button>
            </div>
          </div>

          <div
            style={{
              width: "670px",
              height:'234px',
              overflow:'auto',
              background: "rgba(255, 255, 255)",
            }}
          >
            {xt.map((item) => {
              return (
                <div
                  key={item.id}
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    padding: "10px",
                  }}
                >
                  <span>{item.con}</span>
                  <span>{item.time}</span>
                </div>
              );
            })}
          </div>
          {/* 弹框 */}
          <>
            <Modal
              footer={null}
              title='发布公告'
              open={isModalOpen}
              onOk={handleOk}
              onCancel={handleCancel}
            >
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="内容"
                  name="con"
                  rules={[
                    { required: true, message: "Please input your username!" },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item label={null}>
                  <Button type="primary" htmlType="submit">
                    添加
                  </Button>
                </Form.Item>
              </Form>
            </Modal>
          </>
          {/* 抽屉 */}
          <>
            <Drawer title="查看更多" onClose={onClose} open={open}>
              <div
                style={{
                  marginLeft: "10px",
                  background: "rgba(255, 255, 255)",
                }}
              >
                {xt.map((item) => {
                  return (
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        padding: "10px",
                      }}
                    >
                      <span>{item.con}</span>
                      <span>{item.time}</span>
                    </div>
                  );
                })}
              </div>
            </Drawer>
          </>
        </div>
      </div>
    </div>
  );
}
